<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tuding的12列栅格</title>
<link rel="stylesheet" href="../css/prettify.css" type="text/css" />
<script type="text/javascript" src="../js/prettify.js"></script>
</head>

<body onload="prettyPrint()">
<h1>Tuding的12列栅格</h1>
<hr />
<pre class="prettyprint linenums">
@charset "utf-8";
/* grid-12 Copyright(c)bubujie.net */
/* container */
.container {
	margin-left: auto;
	margin-right: auto;
	width: 960px;
}
.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 {
	display: inline;
	float: left;
	position: relative;
	margin-left: 10px;
	margin-right: 10px;
}
/* alpha and omega */
.alpha { margin-left: 0; }
.omega { margin-right: 0; }
/* grid-N:width(80N-20) */
.grid-1  { width:  60px; }
.grid-2  { width: 140px; }
.grid-3  { width: 220px; }
.grid-4  { width: 300px; }
.grid-5  { width: 380px; }
.grid-6  { width: 460px; }
.grid-7  { width: 540px; }
.grid-8  { width: 620px; }
.grid-9  { width: 700px; }
.grid-10 { width: 780px; }
.grid-11 { width: 860px; }
.grid-12 { width: 940px; }
/* prefix-N:padding-left(80N) */
.prefix-1  { padding-left:  80px; }
.prefix-2  { padding-left: 160px; }
.prefix-3  { padding-left: 240px; }
.prefix-4  { padding-left: 320px; }
.prefix-5  { padding-left: 400px; }
.prefix-6  { padding-left: 480px; }
.prefix-7  { padding-left: 560px; }
.prefix-8  { padding-left: 640px; }
.prefix-9  { padding-left: 720px; }
.prefix-10 { padding-left: 800px; }
.prefix-11 { padding-left: 880px; }
.prefix-12 { /* n/a */ }
/* suffix-N:padding-right(80N) */
.suffix-1  { padding-right:  80px; }
.suffix-2  { padding-right: 160px; }
.suffix-3  { padding-right: 240px; }
.suffix-4  { padding-right: 320px; }
.suffix-5  { padding-right: 400px; }
.suffix-6  { padding-right: 480px; }
.suffix-7  { padding-right: 560px; }
.suffix-8  { padding-right: 640px; }
.suffix-9  { padding-right: 720px; }
.suffix-10 { padding-right: 800px; }
.suffix-11 { padding-right: 880px; }
.suffix-12 { /* n/a */ }
/* push-N:left(80N) */
.push-1  { left:  80px; }
.push-2  { left: 160px; }
.push-3  { left: 240px; }
.push-4  { left: 320px; }
.push-5  { left: 400px; }
.push-6  { left: 480px; }
.push-7  { left: 560px; }
.push-8  { left: 640px; }
.push-9  { left: 720px; }
.push-10 { left: 800px; }
.push-11 { left: 880px; }
.push-12 { /* n/a */ }
/* pull-N:left(-80N) */
.push-1  { left:  -80px; }
.push-2  { left: -160px; }
.push-3  { left: -240px; }
.push-4  { left: -320px; }
.push-5  { left: -400px; }
.push-6  { left: -480px; }
.push-7  { left: -560px; }
.push-8  { left: -640px; }
.push-9  { left: -720px; }
.push-10 { left: -800px; }
.push-11 { left: -880px; }
.push-12 { /* -n/a */ }
/* clear */
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
/* clearfix */
.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}
/* clearfix for IE6 + IE7 */
* html .clearfix, *:first-child+html .clearfix { zoom: 1; }
/* showgrid */
.showgrid { background: url(src/grid.png); }

</pre>
<hr />
<div id="colophon">
  <address>
  <a href="http://www.bubujie.com/" target="_blank" class="logo"><img src="../img/logo_16px.gif" width="48" height="20" alt="步步街"></a> <em>Copyright ©</em> <a href="http://www.bubujie.com/" target="_blank">步步街银川网络商城</a> <span>All Rights Reserved.</span>
  </address>
</div>
</html>
